<script setup lang="tsx">
import { reactive, inject, defineComponent, onMounted, ref, markRaw } from 'vue'
import {
  ElRow,
  ElCol,
  ElSteps,
  ElStep,
  ElMessage,
  ElDescriptions,
  ElDescriptionsItem,
  type StepProps
} from 'element-plus'
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { getDetailApi, getSignApi, getPutApi, getConfirmApi } from '@/api/sales'
import { BaseButton } from '@/components/Button'
import Auditing from './modules/Auditing.vue'

const currentRow: any = inject('currentRow')
const emit = defineEmits(['close', 'get-list'])
const reset = async () => {
  const res = await getDetailApi(currentRow.id)
  if (res) {
    res.data.info.order_detail = res.data.info.order_detail.map((val) => {
      const resultArray = val.goods_image.split(',')
      return {
        ...val,
        imgList: resultArray[0]
      }
    })
    Object.assign(detailData, res.data.info)
  }
}

// 获取详情数据
const loading = ref(true)
const detailData = reactive({})
const getDetail = async () => {
  loading.value = true
  const res = await getDetailApi(currentRow.id)
  if (res) {
    res.data.info.order_detail = res.data.info.order_detail.map((val) => {
      const resultArray = val.goods_image ? val.goods_image.split(',') : []
      return {
        ...val,
        imgList: resultArray[0]
      }
    })
    Object.assign(detailData, res.data.info)
    loading.value = false
  }
}

// 进度条
const Setp = defineComponent({
  setup() {
    const statusMap: StepProps[][] = [
      [
        {
          title: '单据提交',
          status: 'success',
          description: detailData.order_log[0] ? detailData.order_log[0].create_time : ''
        },
        { title: '待发货', status: 'process', description: '' },
        { title: '待收货', status: 'wait', description: '' },
        { title: '待完成', status: 'wait', description: '' }
      ],
      [
        {
          title: '单据提交',
          status: 'success',
          description: detailData.order_log[0] ? detailData.order_log[0].create_time : ''
        },
        { title: '待发货', status: 'process', description: '' },
        { title: '待收货', status: 'wait', description: '' },
        { title: '待完成', status: 'wait', description: '' }
      ],
      [
        {
          title: '单据提交',
          status: 'success',
          description: detailData.order_log[0] ? detailData.order_log[0].create_time : ''
        },
        {
          title: '已发货',
          status: 'success',
          description: detailData.order_log[2] ? detailData.order_log[2].create_time : ''
        },
        {
          title: '待收货',
          status: 'process',
          description: ''
        },
        { title: '待完成', status: 'wait', description: '' }
      ],
      [
        {
          title: '单据提交',
          status: 'success',
          description: detailData.order_log[0] ? detailData.order_log[0].create_time : ''
        },
        {
          title: '已发货',
          status: 'success',
          description: detailData.order_log[2] ? detailData.order_log[2].create_time : ''
        },
        {
          title: '已收货',
          status: 'success',
          description: detailData.order_log[3] ? detailData.order_log[3].create_time : ''
        },
        {
          title: '已完成',
          status: 'success',
          description: detailData.order_log[3] ? detailData.order_log[3].create_time : ''
        }
      ],
      [
        {
          title: '单据提交',
          status: 'success',
          description: detailData.order_log[0] ? detailData.order_log[0].create_time : ''
        },
        {
          title: '已取消',
          status: 'error',
          description: detailData.order_log[1] ? detailData.order_log[1].create_time : ''
        }
      ]
    ]
    const index = detailData.order_status - 1
    const active = statusMap[index].findIndex((item) => item.status === 'error')
    return () => (
      <>
        <p>销售单进度条</p>
        <ElSteps active={active === -1 ? statusMap[index].length : active + 1} align-center>
          {statusMap[index].map((item) => {
            return <ElStep title={item.title} status={item.status} description={item.description} />
          })}
        </ElSteps>
        {detailData.order_status === 5 ? (
          <>
            <p>取消理由</p>
            <p>{detailData.remark}</p>
          </>
        ) : undefined}
      </>
    )
  }
})
// 收货
const signFor = async () => {
  const res = await getSignApi({ id: currentRow.id })
  if (res) {
    ElMessage.success(res.msg)
    emit('close')
    emit('get-list')
  }
}
// 取消收货
const warehousing = async () => {
  const res = await getPutApi({ id: currentRow.id })
  if (res) {
    ElMessage.success(res.msg)
    emit('close')
    emit('get-list')
  }
}
// 发货
const receiving = async () => {
  const res = await getConfirmApi({ id: currentRow.id })
  if (res) {
    ElMessage.success(res.msg)
    emit('close')
    emit('get-list')
  }
}
onMounted(() => getDetail())
</script>

<template>
  <ContentDetailWrap title="销售订单">
    <component
      :is="markRaw(Auditing)"
      @get-list="reset"
      :dataList="detailData.order_detail"
      v-if="!loading"
    />
    <ElRow class="mt-[20px]" :gutter="20" v-if="!loading">
      <ElCol :span="12">订单总计：{{ detailData.total_amount }}</ElCol>
    </ElRow>
    <template #footer>
      <div class="mt-[20px]" v-if="!loading">
        <Setp />
      </div>
      <div style="margin-top: 40px" v-if="detailData.store_user">
        <ElDescriptions title="门店列表">
          <ElDescriptionsItem label="所属门店：">{{ detailData.store.name }}</ElDescriptionsItem>
          <ElDescriptionsItem label="门店负责人：">{{
            detailData.store_user.real_name
          }}</ElDescriptionsItem>
          <ElDescriptionsItem label="联系电话：">{{
            detailData.store_user.mobile
          }}</ElDescriptionsItem>
          <ElDescriptionsItem label="收货地址：">
            <el-tag size="small">{{ detailData.store.address }}</el-tag>
          </ElDescriptionsItem>
          <ElDescriptionsItem label="付款方式：">
            {{ detailData.pay_type_text }}
          </ElDescriptionsItem>
          <div v-if="detailData.salesman_name">
            <ElDescriptionsItem label="业务员下单：">{{
              detailData.salesman_name
            }}</ElDescriptionsItem>
          </div>
        </ElDescriptions>
      </div>
      <div style="margin-top: 40px" v-if="detailData.platform_large && detailData.pay_type == 5">
        <ElDescriptions title="对公转账信息">
          <ElDescriptionsItem label="公司名称：">{{
            detailData.platform_large.account_name
          }}</ElDescriptionsItem>
          <ElDescriptionsItem label="开户银行：">{{
            detailData.platform_large.bank_name
          }}</ElDescriptionsItem>
          <ElDescriptionsItem label="银行账号：">{{
            detailData.platform_large.bank_no
          }}</ElDescriptionsItem>
          <ElDescriptionsItem label="">
            <template v-if="detailData.voucher && typeof detailData.voucher === 'string'">
              <div
                v-for="(image, index) in detailData.voucher.split(',')"
                :key="index"
                style="display: inline-block; margin-top: 10px; margin-right: 10px"
              >
                <img :src="image" style="width: 100px; height: 100px" />
              </div>
            </template>
          </ElDescriptionsItem>
        </ElDescriptions>
      </div>
      <div class="w-full flex items-center justify-center mt-[20px]">
        <BaseButton @click="emit('close')">关闭</BaseButton>
        <template v-if="!loading">
          <BaseButton type="warning" @click="signFor()" v-if="detailData.order_status === 2"
            >发货</BaseButton
          >
          <BaseButton type="warning" @click="warehousing()" v-if="detailData.order_status === 2"
            >取消发货</BaseButton
          >
          <BaseButton type="warning" @click="receiving()" v-if="detailData.order_status === 3"
            >收货</BaseButton
          >
        </template>
      </div>
    </template>
  </ContentDetailWrap>
</template>
